<template>
  <div style="font-size: 14px">
    <div v-if="type === 'allModel'">
      <el-collapse v-model="activeNames" @change.stop="handleChange">
        <!-- @change.stop 防止点击后溢出触发别的事件 -->
        <el-collapse-item name="1">
          <template slot="title">
            <div :style="style">
              <div style="color: #404040;margin-right: 20px;">{{ searchForm.title ? searchForm.title : '筛选' }}</div>
              <operation-button :button-group="buttonGroup" />
            </div>
          </template>
          <div style="padding: 0px 30px;">
            <div v-if="['retrievalNumber','talentPerson','project', 'water'].includes(modelType)">
              <div style="display: flex;margin: 10px 0;">
                <div v-if="['retrievalNumber'].includes(modelType)" style="margin-right: 15px;">
                  <el-popover placement="bottom" trigger="click" v-model="popoverVisible1" @show="handlePopoverShow1">
                    <el-select v-model="filters.isUnlock" placeholder="请选择" ref="selectRef1" class="hidden-input-select">
                      <el-option v-for="(item, index) in isUnlockList" :key="index" :label="item.name"
                        :value="item.index"></el-option>
                    </el-select>
                    <el-button type="text" slot="reference" style="color: #606266;font-weight: 700;">解锁状态<i
                        :class="filters.isUnlock === '-1'?'el-icon-caret-bottom':'el-icon-caret-top'"
                         :style="filters.isUnlock === '-1'?'':'color: #409EFF'"
                        ></i></el-button>
                  </el-popover>
                </div>
                <div v-if="['retrievalNumber'].includes(modelType)" style="margin-right: 15px;">
                  <el-popover placement="bottom" trigger="click" v-model="popoverVisible2" @show="handlePopoverShow2">
                    <el-select v-model="filters.comLockStatus" placeholder="请选择" ref="selectRef2">
                      <el-option v-for="(item, index) in lockStatusList" :key="index" :label="item.name"
                        :value="item.index"></el-option>
                    </el-select>
                    <el-button type="text" slot="reference" style="color: #606266;font-weight: 700;">锁定状态<i
                      :class="filters.comLockStatus === '-1'?'el-icon-caret-bottom':'el-icon-caret-top'"
                      :style="filters.comLockStatus === '-1'?'':'color: #409EFF'"
                      ></i></el-button>
                  </el-popover>
                </div>
                <div v-if="['retrievalNumber','talentPerson'].includes(modelType)" style="margin-right: 15px;">
                  <el-popover placement="bottom" trigger="click" v-model="popoverVisible3"  @show="handlePopoverShow3">
                    <el-select v-model="filters.isNeedPhone" placeholder="请选择" ref="selectRef3">
                      <el-option v-for="(item, index) in isPhoneList" :key="index" :label="item.name"
                        :value="item.index"></el-option>
                    </el-select>
                    <el-button type="text" slot="reference" style="color: #606266;font-weight: 700;">联系电话<i
                        :class="filters.isNeedPhone === '-1'?'el-icon-caret-bottom':'el-icon-caret-top'"
                         :style="filters.isNeedPhone === '-1'?'':'color: #409EFF'"
                        ></i></el-button>
                  </el-popover>
                </div>
                <div v-if="['retrievalNumber', 'project', 'water'].includes(modelType)" style="margin-right: 15px;">
                  <el-popover placement="bottom" trigger="click" v-model="popoverVisible4" @show="handlePopoverShow4">
                    <el-select v-model="filters.activeType" placeholder="请选择" ref="selectRef4" @change="handleClick(filters.activeType)">
                      <el-option v-for="(item, index) in ZzTypesList" :key="index" :label="item.ZzTypeName"
                        :value="item.ZzTypeId"></el-option>
                    </el-select>
                    <el-button type="text" slot="reference" style="color: #606266;font-weight: 700;">{{ modelType | modeltypeTextFilter }}类别<i
                        :class="filters.activeType === '0'?'el-icon-caret-bottom':'el-icon-caret-top'"
                         :style="filters.activeType === '0'?'':'color: #409EFF'"
                        ></i></el-button>
                  </el-popover>
                </div>
              </div>
            </div>
            <el-form ref="searchForm" :model="filters" label-suffix=":"
              :size="searchForm.size ? searchForm.size : 'medium'" style="" inline
              @submit.native.prevent @keyup.enter.prevent>
              <template v-for="(field, index) in searchForm.fields">
                <template v-if="field.show">
                  <template v-if="field.type === 'sortType' || field.type === 'sortWay'">
                    <span style="display: none;"></span>
                  </template>
                  <el-form-item v-else :key="index" :label="field.labelShow ? field.label : ''"
                    style=" margin: 0 10px 15px 0; font-size: 16px; color: #5A5A5A;">
                    <template v-if="field.type === 'select'">
                      <el-select v-model="filters[field.name]" filterable
                        :clearable="['type', 'sortFieldId', 'sortType'].includes(field.name) ? false : true"
                        :placeholder="'请选择' + field.label">
                        <!-- type,,,是必填不清空 -->
                        <el-option v-for="item in field.options" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </template>
                    <template v-else-if="field.type === 'multipleSelect'">
                          <!-- 多选下拉框，限制只能3个 -->
                           <div>
                          <el-select v-model.trim="filters[field.name]" multiple :multiple-limit="3"  filterable remote reserve-keyword
                            placeholder="请输入最多3个资质名称" :remote-method="remoteMethod" :loading="loading" 
                            @exceed="handleExceedTag"
                            @focus="remoteMethod('')"
                            @change="changeExceedTag"
                            
                            >
                            <el-option v-for="item in restaurants" :key="item.value" :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </div>
                        <!-- <p>{{ mulselectList }}</p> -->
                    </template>
                    <template v-else-if="field.type === 'region'">
                      <el-select ref="province" filterable clearable v-model="state_region.province" placeholder="省/直辖市"
                        @change="provinceChange">
                        <el-option v-for="item in region.province" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                      <template v-if="modelType !== 'talentPerson'">
                        <el-select ref="city" v-model="state_region.city" placeholder="市" filterable clearable
                          @change="cityChange">
                          <el-option v-for="item in region.city" :key="item.value" :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </template>
                      <template v-if="modelType === 'project'">
                        <el-select ref="area" v-model="state_region.area" placeholder="区" filterable clearable
                          @change="areaChange">
                          <el-option v-for="item in region.area" :key="item.value" :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </template>
                    </template>
                    <template v-else-if="field.type === 'cascade'">
                      <el-cascader v-model="filters[field.name]" :options="field.options" @change="handleChange" />
                    </template>
                    <template v-else-if="field.type === 'datetimerange'">
                      <el-date-picker v-model="filters[field.name]" type="datetimerange" :picker-options="pickerOptions"
                        range-separator="至" :start-placeholder="'开始日期'" end-placeholder="结束日期" align="right"
                        value-format="yyyy-MM-dd HH:MM:ss" @change="handleChangePicker" />
                    </template>
                    <template v-else-if="field.type === 'date'">
                      <el-date-picker v-model="filters[field.name]" type="date" />
                    </template>
                    <template v-else-if="field.type === 'input'">
                      <el-input v-model.trim="filters[field.name]" clearable :placeholder="'请输入' + field.label" />
                    </template>
                    <template v-else-if="field.type === 'inputAutocomplete'">
                      <el-autocomplete clearable v-model.trim="filters[field.name]" :placeholder="'请输入' + field.label"
                        :fetch-suggestions="querySearchAsync" :popper-append-to-body="true" :trigger-on-focus="true"
                        class="custom-autocomplete" style="width: 426px;" @select="handleSelect" />
                    </template>
                  </el-form-item>
                </template>
              </template>
              <el-form-item>
                <el-button type="primary" @click.native.prevent="searching()">
                  查询
                </el-button>
              </el-form-item>
              <!-- 用户管理 -->
              <template v-if="modelType === 'userManagement' || modelType === 'loginLogs' || modelType === 'visitLogs'">
                <el-form-item>
                  <el-button @click.native.prevent="refresh">
                    重置
                  </el-button>
                </el-form-item>
              </template>
            </el-form>
          </div>
      <!-- <div style="padding:0px 30px; display: flex;align-items: center;">
      <p style="margin-top: 0;">已选条件：{{allFilter}}</p>
      <el-tag
        v-for="item in choiceList"
        :key="item.key"
        closable
        @close="removeTag(item)"
        style="margin-right: 10px; margin-bottom: 10px"
      >
     {{ item.Label }}
      </el-tag>
    </div> -->
        </el-collapse-item>
      </el-collapse>
      <div v-if="modelType === 'retrievalNumber'" style=" background-color: #FAFBFD; padding: 2px 30px;">
        <div style="display: flex; align-items: center;justify-content: space-between; flex-wrap: nowrap;">
          <div style="color: #404040; padding: 14px 0;width: 300px;"><span>搜索到<span style="color: #F56C6C">超 {{
            countcount }}
              </span>个企业</span></div>
          <div style="display: flex;align-items: center;">
            <div v-for="(field, index) in searchForm.fields">
              <div v-if="field.type === 'sortType'" style="position: relative; ">
                <div style="width: 60px;">
                  <span>{{ field.label }}</span>
                  <i @click="tosort('0')" class="el-icon-caret-top"
                    :style="filters[field.name] === '0' ? 'color: #409EFF;' : ''"
                    style="cursor: pointer; position: absolute; left: 30px;top:-5px"></i>
                  <i @click="tosort('1')" class="el-icon-caret-bottom"
                    :style="filters[field.name] === '1' ? 'color: #409EFF;' : ''"
                    style="cursor: pointer; position: absolute; left: 30px;top:5px"></i>
                </div>
              </div>
              <div v-else-if="field.type === 'sortWay'">
                <el-radio-group v-model="filters[field.name]" size="small">
                  <el-radio-button v-for="item in field.options" :label="item.value">{{ item.label }}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import OperationButton from '@/components/OperationButton/index.vue'
import { getComZzTypes, getDistricts, searchZzName } from '@/api/company'
import { getDistrictsWater } from '@/api/water'

import { getProjectTypes } from '@/api/project'
import { getProjectTypesWater } from '@/api/water'

import { getComCount } from '@/api/company'

export default {
  name: 'SearchForm',
  components: { OperationButton },
  props: {
    searchForm: { type: Object, default: null },
    buttonGroup: { type: Object, default: null },
    modelType: { type: String, default: null },
    type: { type: String, default: 'allModel' }
  },
  filters: {
    modeltypeTextFilter(status) {
      const statusMap = {
        'retrievalNumber': '资质',
        'project': '项目',
        'water': '水利'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      allFilter:'',
      popoverVisible1:false, //阻止还没选中就消失popover
      popoverVisible2:false,
      popoverVisible3:false,
      popoverVisible4:false,
      countcount: 0,
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 10
      },
      maxPage: 50, // 最多显示多少页数据
      selectedItems: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '全部',
            onClick(picker) {
              const end = ''
              const start = ''
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '3天内',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '一周内',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '半年内',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '一年内',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      ZzTypesList: [], // 资质列表
      isPhoneList: [
        { index: '-1', name: '全部' },
        { index: '0', name: '有联系方式' },
        { index: '1', name: '有手机' }
      ],
      isUnlockList: [
        { index: '-1', name: '全部' },
        { index: '0', name: '未解锁' },
        { index: '1', name: '已解锁' }
      ],
      lockStatusList: [
        { index: '-1', name: '全部' },
        { index: '0', name: '未锁定' },
        { index: '1', name: '已锁定' }
      ],
      style: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '13px 30px',
        borderRadius: '10px 10px 0 0',
        width: '100%'
      },
      region: {
        province: [],
        city: [],
        area: []
      },
      filters: null,
      state_region: null,
      restaurants: [], //资质名称列表
      activeNames: ['1'],
      iswatch: true,
      choiceList:[],
      mulselectList:[],
    }
  },



  watch: {
    // 监听对象filters，
    filters: {
      handler(newVal, oldVal) {
        let copyObj=Object.assign({},newVal);
        if(newVal.zzName){
          copyObj.zzName=newVal.zzName.join('#');
        }
  
        // 同步设置 store
        if (this.iswatch) {
          this.getComCountCount(copyObj)
          this.$emit('searchFormEmit', copyObj)//zhe
          this.setFilters(newVal)
          this.$emit('watchTypeEmit', newVal.type)
        }
        // 所有条件
        this.allFilter='';//这个不变成数组吗，那
        this.choiceList=[];
        //this.searchForm.fields 
        for(let key in newVal){
          if((
            newVal[key]!=''
            &&newVal[key]!=undefined
            &&(newVal[key]!='0'||['sortType','isUnlock','comLockStatus','isNeedPhone'].indexOf(key)>-1)
            &&newVal[key]!='-1'
            &&['activeType'].indexOf(key)<0
          )
          ){
            // this.allFilter+='$'+newVal[key];
            //转换
            let selectValue=newVal[key];
            let label=selectValue;
            //选项
            let formFilter=this.searchForm.fields.filter(p=>p.name==key)[0];
            if(!formFilter){
              formFilter={};
            }
            if(['endDateId','sortFieldId','sortType'].indexOf(key)>-1){
              label=formFilter.options.filter(p=>p.value==selectValue)[0].label;
            }else if(key=='distId'){
              let province=this.region.province.filter(p=>p.value==selectValue);
              if(province&&province.length>0){
                label=province[0].label;
              }else{
                let city=this.region.city.filter(p=>p.value==selectValue);
                if(city&&city.length>0){
                label=city[0].label;
                }
              }
            }else if(key=='isUnlock'){
              formFilter.label='解锁状态';
              label=this.isUnlockList.filter(p=>p.index==selectValue)[0].name;
              // label=`${formFilter.label}-${label}`;
            }else if(key=='comLockStatus'){
              formFilter.label='锁定状态';
              label=this.lockStatusList.filter(p=>p.index==selectValue)[0].name;
              // label=`${formFilter.label}-${label}`;
            }
            else if(key=='isNeedPhone'){
              formFilter.label='联系电话';
              label=this.isPhoneList.filter(p=>p.index==selectValue)[0].name;
              // label=`${formFilter.label}-${label}`;
            }else if(key=='zzTypeId'){
              label=this.ZzTypesList.filter(p=>p.ZzTypeId==selectValue)[0].ZzTypeName;
            }
            
            this.choiceList.push({
              Name:formFilter.label,
              Label:label,
              Value:selectValue,
              Key:key,
            });
          }
        }
       // console.log('this.ZzTypesList',this.ZzTypesList);
       // console.log('choiceList',this.choiceList);
      },
      deep: true
    },
    state_region: {
      handler(newVal, oldVal) {
        // 同步设置 store
        this.setRegion(newVal)
      },
      deep: true
    },
    'searchForm.reset': {
      handler(newVal) {
        if (newVal) {
          // 重置条件
          this.refresh()
        }
      },
      deep: true
    }
  },
  created() {
    // 初始化筛选条件
    this.getFilters()
    this.getComZzTypesItems()
    if (this.searchForm.region) {
      this.getRegion()
      this.getDistrictsList()
    }
    this.getComCountCount(this.filters) //要求：1，带上所有的搜索条件。2，只在第一页请求，分页不请求
  },
  methods: {
    changeExceedTag(v){
      this.mulselectList=v
    },
    handlePopoverShow1() {
      this.$nextTick(() => {
        this.$refs.selectRef1.focus()
        this.$refs.selectRef1.$el.querySelector('.el-input__inner').click()// 对于 Element UI 2.x，可能需要触发点击事件
      })
    },
    handlePopoverShow2() {
      this.$nextTick(() => {
        this.$refs.selectRef2.focus()
        this.$refs.selectRef2.$el.querySelector('.el-input__inner').click()// 对于 Element UI 2.x，可能需要触发点击事件
      })
    },
    handlePopoverShow3() {
      this.$nextTick(() => {
        this.$refs.selectRef3.focus()
        this.$refs.selectRef3.$el.querySelector('.el-input__inner').click()// 对于 Element UI 2.x，可能需要触发点击事件
      })
    },
    handlePopoverShow4() {
      this.$nextTick(() => {
        this.$refs.selectRef4.focus()
        this.$refs.selectRef4.$el.querySelector('.el-input__inner').click()// 对于 Element UI 2.x，可能需要触发点击事件
      })
    },
    tosort(v) {
      this.filters.sortType = v
      this.$emit('searchFormEmit', this.filters)
    },
    async getComCountCount(v) {
      this.loading = true
      this.listQuery = { ...this.listQuery, ...v}
      getComCount(this.listQuery).then((res) => {
        this.loading = false
        if (res.code === 200) {
          this.countcount = res.data.count
          // 最多展示 this.maxPage 页数据
          this.total = Math.ceil(this.countcount / this.listQuery.pageSize) > this.maxPage ? this.listQuery.pageSize * this.maxPage : this.countcount
          this.$emit('totalEmit', this.total)
        }
      })
    },
    remoteMethod(query) {
      searchZzName({ keyWord: query ? query : '' }).then((res) => {
        this.loading = false
        if (res.code === 200) {
          const options = []
          res.data.ZzNames.forEach((item) => {
            const o = { value: item.ZzName }
            options.push(o)
          })
          this.restaurants = options
        }
      })
    },
    handleExceedTag(){
      this.$message.warning("最多只能选择3个选项！")
    },
    querySearchAsync(queryString,cb) {
      searchZzName({ keyWord: queryString ? queryString : '' }).then((res) => {
        this.loading = false
        if (res.code === 200) {
          const options = []
          res.data.ZzNames.forEach((item) => {
            const o = { value: item.ZzName }
            options.push(o)
          })
          this.restaurants = options
          cb(this.restaurants)
        }
      })
    },
    removeTag(tag) {
      console.log('old-filters',this.filters,tag)
      this.choiceList=this.choiceList.filter(p=>p.key!=tag.Key);
      if(false){

      }else{
        this.filters[tag.Key]=''
      }
      console.log('new-filters',this.filters,tag)
    },
    getLabel(value) {
      const item = this.list.find(item => item.value === value);
      return item ? item.label : value;
    },

    handleChangePicker(v) {
      if (v === null) {
        this.filters.startDate = ''
        this.filters.endDate = ''
        this.$emit('searchFormEmit', this.filters)
      } else if (v[0] === '') {
        this.filters.startDate = ''
        this.filters.endDate = ''
        this.$emit('searchFormEmit', this.filters)
      } else {
        this.filters.startDate = v[0]
        this.filters.endDate = v[1]
        this.$emit('searchFormEmit', this.filters)
      }
    },
    handleChange(val) {
      this.activeNames = val;
    },

    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      }
    },
    handleSelect(item) {
      console.log(item);
    },
    //
    getFilters() {
      this.filters = this.$store.getters[this.modelType + '/getFilters']
    },
    setFilters(filters) {
      this.$store.dispatch(this.modelType + '/setFilters', filters)
    },
    resetFilters() {
      this.$store.dispatch(this.modelType + '/resetFilters')
      // 重置后重新获取
      this.getFilters()
    },
    getRegion() {
      this.state_region = this.$store.getters[this.modelType + '/getRegion']
      // 初始化地址
      if (this.state_region) {
        if (this.state_region.province !== '') {
          this.getDistrictsList(this.state_region.province, 'city')
        }

        if (this.state_region.city !== '') {
          this.getDistrictsList(this.state_region.city, 'area')
        }
      }
    },
    setRegion(filters) {
      this.$store.dispatch(this.modelType + '/setRegion', filters)
    },
    resetRegion() {
      this.$store.dispatch(this.modelType + '/resetRegion')
      this.region.city = []
      this.region.area = []
      // 重置后重新获取
      this.getRegion()
    },
    provinceChange(value) {
      if (this.modelType !== 'talentPerson') {
        this.getDistrictsList(value, 'city')
        this.region.city = []
        this.region.area = []
      }
      this.filters.distId = value
    },
    cityChange(value) {
      if (this.modelType === 'project') {
        this.getDistrictsList(value, 'area')
        this.region.area = []
      }

      this.filters.distId = value
    },
    areaChange(value) {
      this.filters.distId = value
    },
    getDistrictsList(distId = 0, node = 'province') {
      this.loading = true
      // 工程项目-水利 请求自己的接口getDistrictsWater zhe
      if (this.modelType === 'water') {
        getDistrictsWater({ distId: distId }).then((res) => {
          this.loading = false
          if (res.code === 200) {
            const options = []
            res.data.dists.forEach((item) => {
              const o = { value: item.DistId, label: item.DistName }
              options.push(o)
            })
            this.region[node] = options
          }
        })
      } else {
        //zhe
        getDistricts({ distId: distId }).then((res) => {
          this.loading = false
          if (res.code === 200) {
            const options = []
            res.data.dists.forEach((item) => {
              const o = { value: item.DistId, label: item.DistName }
              options.push(o)
            })
            this.region[node] = options
          }
        })
      }

    },
    // 1这
    getComZzTypesItems() {
      this.loading = true
      if (this.modelType === 'retrievalNumber') {
        getComZzTypes().then((res) => {
          this.loading = false
          if (res.code === 200) {
            const arr = { ZzTypeId: '0', ZzTypeName: '全部' }
            res.data.ZzTypes.forEach((item) => {
              item.ZzTypeId = item.ZzTypeId + ''
            })
            this.ZzTypesList = res.data.ZzTypes
            this.ZzTypesList.unshift(arr)
          }
        })
      } else if (this.modelType === 'project') {
        getProjectTypes().then((res) => {
          this.loading = false
          if (res.code === 200) {
            const list = [{ ZzTypeId: '0', ZzTypeName: '全部' }]
            res.data.ProjectTypes.forEach((item) => {
              list.push({
                ZzTypeId: item.ProjectType,
                ZzTypeName: item.ProjectType
              })
            })
            this.ZzTypesList = list
          }
        })
      } else if (this.modelType === 'water') {
        getProjectTypesWater().then((res) => {
          this.loading = false
          if (res.code === 200) {
            const list = [{ ZzTypeId: '0', ZzTypeName: '全部' }]
            res.data.ProjectTypes.forEach((item) => {
              list.push({
                ZzTypeId: item.ProjectType,
                ZzTypeName: item.ProjectType
              })
            })
            this.ZzTypesList = list
          }
        })
      }
    },
    // 类别
    handleClick(tab) {
      if (tab === '0') {
        this.refresh()
      } else {
        if (this.modelType === 'retrievalNumber') {
          this.filters.zzTypeId = tab
        } else if (this.modelType === 'project' || this.modelType === 'water') {
          this.filters.projectTypeName = tab
        }
      }
    },
    refresh() {
      // 重置条件
      this.resetFilters()
      this.resetRegion()

      // 恢复重置条件
      this.searchForm.reset = false
    },
    operateEmit(v) {
      this.refresh()
    },
    handleChange(value) {
      this.filters.perTypeName = value[value.length - 1] // // 传名字给后台
    }
  }

}
</script>

<style scoped>
::v-deep.no-wrap-select .el-select__tags {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}

::v-deep.no-wrap-select .el-select__tags::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

::v-deep.no-wrap-select .el-tag {
  flex-shrink: 0; /* 防止标签缩小 */
  margin-right: 6px;
}



/* 隐藏输入框 */
::v-deep .hidden-input-select .el-input__inner {
  display: none !important;
}

/* 调整下拉面板位置（可选） */
.hidden-input-select .el-select-dropdown {
  margin-top: -36px; /* 根据实际情况调整 */
}
::v-deep .el-tabs__item {
  height: 26px;
  line-height: 28px;
  font-size: 13px;
}

::v-deep .el-autocomplete-suggestion {
  /* width: auto !important; */
}

::v-deep .el-collapse-item__header {
  background-color: #fafbfd;
}

::v-deep .el-collapse-item__wrap {
  border-bottom: none;
}

/* 隐藏最后一个面板的图标 */
/* ::v-deep .el-collapse-item__arrow:last-child {
  display: none;
} */
::v-deep .el-tabs__nav-next {
  line-height: 26px;
}

::v-deep .el-tabs__nav-prev {
  line-height: 26px;
}

/* 提高下拉菜单的 */
::v-deep .custom-autocomplete .el-autocomplete-suggestion {
  color: red;
  width: 300px !important;
}
</style>
